<template>
	<div class="bifen">
		
		<el-row>
			<el-col :span="8" class="redBoX">
				<!--这就是 进度比例条啊-->
				<div  v-styler="{'width':(red.goal)/(max.goal)*100+'%'}" class="red-mark">  </div>
				<div  v-styler="{'width':(red.distance)/(max.distance)*100+'%'}" class="red-mark">  </div>
				<div  v-styler="{'width':(red.sprintingDistance)/(max.sprintingDistance)*100+'%'}" class="red-mark">  </div>
				<div  v-styler="{'width':(red.passRate)/(max.passRate)*100+'%'}" class="red-mark">  </div>
				<div  v-styler="{'width':(red.possession)/(max.possession)*100+'%'}" class="red-mark">  </div>
				<div  v-styler="{'width':(red.maxRunspeed)/(max.maxRunspeed)*100+'%'}" class="red-mark">  </div>
				<div  v-styler="{'width':(red.avgSpeed)/(max.avgSpeed)*100+'%'}" class="red-mark">  </div>
				<div  v-styler="{'width':(red.redCard)/(max.redCard)*100+'%'}" class="red-mark">  </div>
				<div  v-styler="{'width':(red.yellowCard)/(max.yellowCard)*100+'%'}" class="red-mark">  </div>
			</el-col>
			<el-col :span="8">
				<!--如需优化,可将条目名称 也一并进行后台传递,而不是前台写死条目-->
				<div class="game-data-list ">
					<span class="">{{red.goal}}</span><span>比赛进球</span><span >{{blue.goal}}</span>
				</div>
				<div class="game-data-list ">
					<span>{{red.distance}}m</span><span>跑动距离	</span><span>{{blue.distance}}m</span>
					
				</div>
				<div class="game-data-list ">
					<span>{{red.sprintingDistance}}m</span><span>冲刺距离</span><span>{{blue.sprintingDistance}}m</span>
					
				</div> 
				<div class="game-data-list ">
					<span>{{red.passRate}}%</span><span>传球成功率</span><span>{{blue.passRate}}%</span>
					
				</div>
				<div class="game-data-list ">
					<span >{{red.possession}}%</span><span>控球率</span><span>{{blue.possession}}%</span>
					
				</div>
				<div class="game-data-list ">
					<span>{{red.maxRunspeed}}m/s</span><span>最高跑动速度</span><span>{{blue.maxRunspeed}}m/s</span>
					
				</div>
				<div class="game-data-list ">
					<span>{{red.avgSpeed}}m/s</span><span>平均跑动速度</span><span>{{blue.avgSpeed}}m/s</span>
				
				</div>
				<div class="game-data-list ">
					<span>{{red.redCard}}</span><span>红牌</span><span>{{blue.redCard}}</span>
				
				</div>
				<div class="game-data-list">
					<span >{{red.yellowCard}}</span><span>黄牌</span><span>{{blue.yellowCard}}</span>
				
				</div>
				
				
			</el-col>
			<el-col :span="8" class="blueBoX">
				<!--真low 啊 可用函数封装加工此逻辑-->
				<div  v-styler="{'width':(blue.goal)/(max.goal)*100+'%'}" class="blue-mark">  </div>
				<div  v-styler="{'width':(blue.distance)/(max.distance)*100+'%'}" class="blue-mark">  </div>
				<div  v-styler="{'width':(blue.sprintingDistance)/(max.sprintingDistance)*100+'%'}" class="blue-mark">  </div>
				<div  v-styler="{'width':(blue.passRate)/(max.passRate)*100+'%'}" class="blue-mark">  </div>
				<div  v-styler="{'width':(blue.possession)/(max.possession)*100+'%'}" class="blue-mark">  </div>
				<div  v-styler="{'width':(blue.maxRunspeed)/(max.maxRunspeed)*100+'%'}" class="blue-mark">  </div>
				<div  v-styler="{'width':(blue.avgSpeed)/(max.avgSpeed)*100+'%'}" class="blue-mark">  </div>
				<div  v-styler="{'width':(blue.redCard)/(max.redCard)*100+'%'}" class="blue-mark">  </div>
				<div  v-styler="{'width':(blue.yellowCard)/(max.yellowCard)*100+'%'}" class="blue-mark">  </div>  
			</el-col>
			
			
		</el-row>
	
		



	</div>
</template>

<script>
	export default {
		name: 'TeamPerformance',
		props:['red','blue','max'],
		data(){
			return {
				info:{//参考此处数据结构可优化上面的 dom结构..
					txt:{
						goal:'比赛进球',
						distance:'跑动距离',
						sprintingDistance:'冲刺距离',
						passRate:'传球成功率率',
						possession:'控球率',
						maxRunspeed:'最高跑动速度',
						avgSpeed:'跑动速度',
						redCard:'红牌',
						yellowCard:'黄牌'
					},
					max:{
						goal:5,
						runDistance:100000,
						sprintingDistance:1000,
						passRate:100,
						possession:100,
						maxRunspeed:20,
						avgSpeed:20,
						redCard:10,
						yellowCard:10
					},
					red:{
						goal:4,
						runDistance:78211,
						sprintingDistance:781,
						passRate:78,
						possession:52,
						maxRunspeed:14.5,
						avgSpeed:11.2,
						redCard:0,
						yellowCard:1
						
					},
					blue:{
						goal:1,
						runDistance:78211,
						sprintingDistance:781,
						passRate:78,
						possession:48,
						maxRunspeed:14.5,
						avgSpeed:13.5,
						redCard:0,
						yellowCard:4
					}
				}
			}
		},
		directives:{
			styler:{
				inserted:function(el,binding){
					for(let i in binding.value  ){
						el.style[i]=binding.value[i];
						
					}
				}
			}
		}
	}
</script>

<style  scoped="scoped">
	.bifen{

		height: auto;
		background-color:#F9F9F9 ;
		/*overflow: hidden;*/
	}
	
	.red-mark,.blue-mark{

		height: 12px;
		min-width: 10px;
		max-width: 95%;
		margin:14px;
		border-radius: 10px;		
		clear: both;
	}
	.red-mark{
		float: right;
		background-color: #FF3300;
		
	}
	.blue-mark{
		float: left;
		background-color: #0066CC;
		
	}
	.bifen .el-row {
		width: 100%;
		height: auto;
		margin-bottom: 20px;
	
		
		
	}
	
	.bifen .el-col {
	
		
		border-radius: 4px;
		text-align: center;
		
	}
	
	.bg-purple-dark {
		background: #99a9bf;
	}
	
	.bg-purple {
		background: #d3dce6;
	}
	
	.bg-purple-light {
		background: #e5e9f2;
	}
	
	.game-data-list {
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 4px;
		min-height: 40px;
		font-size:14px;
		
	}
	.game-data-list>span:first-of-type{
			display: inline-block;
			min-width:80px;
			color: #FF3300;
			font-weight:600 ;
			text-align: right;
	}
	.game-data-list>span:last-of-type{
		display: inline-block;
		min-width:80px;
		color: #009999;
		font-weight: 600;	
		text-align: left;
	}
	.game-data-list>span:nth-of-type(2){
		display: inline-block;
		min-width:120px;
	}
		
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>